<template>
  <el-row :gutter="6">
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/plan' }">计划控制</el-breadcrumb-item>
          <el-breadcrumb-item>外业进度</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col class="maincont-container">
        <el-tabs v-model="tabConfig.activeName" @tab-click="changeTab">
          <el-tab-pane
            v-loading="listConfig.loading"
            style="height:100%"
            v-if="!tabConfig.isHighLevel"
            label="工作量上报"
            name="prolist"
          >
            <my-tableX
              v-if="listConfig.tableShow && tabConfig.activeName==='prolist'"
              tableHeight="310px"
              @dataEdit="reportData"
              :tableData="listConfig.data"
              :configs="listConfig.configs"
            ></my-tableX>
            <el-container v-if="!listConfig.tableShow" style="width:100%;height:100%">
              <el-row :gutter="10" style="height:100%;width:100%">
                <el-col :span="11" class="project-preview" style="height:100%">
                  <span>工程信息预览</span>
                  <el-form size="medium" label-position="right" label-width="120px">
                    <el-form-item label="项目名称" style="text-align:left">
                      <span style="text-align:left">{{workload.subjectId}}</span>
                    </el-form-item>
                    <el-form-item label="标段" style="text-align:left">
                      <span style="text-align:left">{{workload.tenders}}</span>
                    </el-form-item>
                    <el-form-item label="专业" style="text-align:left">
                      <span style="text-align:left">{{workload.major}}</span>
                    </el-form-item>
                    <el-form-item label="工程编号" style="text-align:left">
                      <span style="text-align:left">{{workload.projectId}}</span>
                    </el-form-item>
                    <el-form-item label="工程名称" style="text-align:left">
                      <span style="text-align:left">{{workload.projectName}}</span>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="2" class="v-divider" style="height:100%"></el-col>
                <el-col :span="11" class="workload-container" style="height:100%">
                  <span>工作量上报</span>
                  <el-form size="medium" label-position="right" label-width="120px">
                    <el-form-item label="钻孔数" style="text-align:left">
                      <el-input-number
                        :controls="false"
                        size="small"
                        controls-position="right"
                        v-model="workload.drillingNumber"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="进尺" style="text-align:left">
                      <el-input-number
                        :controls="false"
                        size="small"
                        controls-position="right"
                        v-model="workload.length"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="监测井" style="text-align:left">
                      <el-input-number
                        :min="0"
                        :controls="false"
                        size="small"
                        controls-position="right"
                        v-model="workload.monitorWell"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="试验井" style="text-align:left">
                      <el-input-number
                        :min="0"
                        :controls="false"
                        style="display:block"
                        size="small"
                        controls-position="right"
                        v-model="workload.testWell"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="上报时间" style="text-align:left">
                      <el-input disabled v-model="workload.createTime"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align:right">
                      <el-button type="primary" @click="onSubmit">提交</el-button>
                      <el-button @click="onCancel">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </el-container>
          </el-tab-pane>
          <el-tab-pane v-loading="todayConfig.loading" label="今日上报" name="today">
            <my-tableX
              v-if="todayConfig.tableShow && tabConfig.activeName==='today'"
              tableHeight="280px"
              @dataEdit="updataData"
              @dataDelete="deleteData"
              :tableData="todayConfig.data"
              :configs="todayConfig.configs"
            ></my-tableX>
            <el-container v-if="!todayConfig.tableShow" style="width:100%;height:100%">
              <el-row :gutter="10" style="height:100%;width:100%">
                <el-col :span="11" class="project-preview" style="height:100%">
                  <span>工程信息预览</span>
                  <el-form size="medium" label-position="right" label-width="120px">
                    <el-form-item label="项目名称" style="text-align:left">
                      <span style="text-align:left">{{workload.subjectId}}</span>
                    </el-form-item>
                    <el-form-item label="标段" style="text-align:left">
                      <span style="text-align:left">{{workload.tenders}}</span>
                    </el-form-item>
                    <el-form-item label="专业" style="text-align:left">
                      <span style="text-align:left">{{workload.major}}</span>
                    </el-form-item>
                    <el-form-item label="工程编号" style="text-align:left">
                      <span style="text-align:left">{{workload.projectId}}</span>
                    </el-form-item>
                    <el-form-item label="工程名称" style="text-align:left">
                      <span style="text-align:left">{{workload.projectName}}</span>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="2" class="v-divider" style="height:100%"></el-col>
                <el-col :span="11" class="workload-container" style="height:100%">
                  <span>工作量修改</span>
                  <el-form size="medium" label-position="right" label-width="120px">
                    <el-form-item label="钻孔数" style="text-align:left">
                      <el-input-number
                        :controls="false"
                        size="small"
                        controls-position="right"
                        v-model="workload.drillingNumber"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="进尺" style="text-align:left">
                      <el-input-number
                        :precision="2"
                        :controls="false"
                        size="small"
                        controls-position="right"
                        v-model="workload.length"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="监测井" style="text-align:left">
                      <el-input-number
                        :min="0"
                        :controls="false"
                        size="small"
                        controls-position="right"
                        v-model="workload.monitorWell"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="试验井" style="text-align:left">
                      <el-input-number
                        :min="0"
                        :controls="false"
                        style="display:block"
                        size="small"
                        @dataEdit="updataData"
                        controls-position="right"
                        v-model="workload.testWell"
                      ></el-input-number>
                    </el-form-item>
                    <el-form-item label="上报时间" style="text-align:left">
                      <el-input disabled v-model="workload.createTime"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align:right">
                      <el-button type="primary" @click="onSubmitEdit">提交</el-button>
                      <el-button @click="onToCancel">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="历史记录" name="history">
            <my-tableX
              v-if="tabConfig.activeName==='history'"
              v-loading="historyConfig.loading"
              tableHeight="280px"
              :tableData="historyConfig.data"
              :configs="historyConfig.configs"
            ></my-tableX>
          </el-tab-pane>
          <el-tab-pane v-if="false" label="工作量统计" name="statics">外业进度统计功能正在开发中......</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import myTableX from "../../../components/base/tableX";

var userType = "";
var projectName = "";
var companyName = "";
var uid = null;
var today = "";

export default {
  created() {
    userType = this.$store.state.m_user.userInfo.user_type;
    companyName = this.$store.state.m_user.userInfo.company;
    projectName = this.$store.state.projectInfo.projectName;
    uid = this.$store.state.m_user.userInfo.id;
    today = this.getNowFormatDate();
    console.log("today:" + today);
    console.log(this.tabConfig);

    if (userType == "1") {
      //勘察单位接口
      console.log(this.tabConfig);

      this.tabConfig.isHighLevel = false;
      this.tabConfig.activeName = "prolist";
      this.todayConfig.configs.operationCol.show = true;
      this.$api.project
        .listByCompany(projectName, companyName)
        .then(res => {
          if (res.code == 200) {
            this.listConfig.data = res.data;
          }
        })
        .catch(err => {
          this.$message.error("err");
        });
    } else {
      this.todayConfig.configs.operationCol.show = false;
    }

    this.initData();
  },

  components: {
    myTableX
  },

  data() {
    var gcolumns = [
      { field: "subjectId", name: "项目" },
      { field: "tenders", name: "标段" },
      { field: "major", name: "专业" },
      { field: "projectId", name: "工程编号" },
      { field: "projectName", name: "工程名称" },
      { field: "drillingNumber", name: "钻孔数" },
      { field: "length", name: "进尺" },
      { field: "monitorWell", name: "监测井" },
      { field: "testWell", name: "试验井" },
      { field: "createTime", name: "上报时间" }
    ];
    return {
      workload: {
        id: 0,
        subjectId: "",
        tenders: "",
        major: "",
        projectId: "",
        projectName: "",
        handler: "",
        drillingNumber: 1,
        length: 0.0,
        monitorWell: 0,
        testWell: 0,
        createTime: ""
      },
      tabConfig: {
        isHighLevel: false,
        activeName: "today"
      },
      listConfig: {
        tableShow: true,
        loading: false,
        data: [],
        configs: {
          columns: [
            { field: "subjectName", name: "项目名称" },
            { field: "tenders", name: "标段" },
            { field: "major", name: "专业", canSort: true },
            { field: "projectId", name: "工程编号" },
            { field: "projectName", name: "工程名称" },
            { field: "projectEngineer", name: "项目工程师" }
          ],
          operationCol: {
            //操作列
            show: true, //显示
            view: false, //查看
            edit: true, //编辑
            options: {
              edit: {
                text: "上报",
                type: "warning"
              }
            }
          },
          showFilterRow: {
            show: false
          },
          operationBtn: {
            show: false,
            add: true,
            output: false
          }
        }
      },
      todayConfig: {
        tableShow: true,
        loading: false,
        data: [],
        configs: {
          nodata: "今日暂无工作量上报数据",
          columns: gcolumns,
          operationCol: {
            //操作列
            show: true, //显示
            view: false, //查看
            edit: true, //编辑
            delete: true
          },
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: false,
            add: false,
            output: false
          }
        }
      },

      historyConfig: {
        loading: false,
        data: [],
        configs: {
          columns: gcolumns,
          operationCol: {
            //操作列
            show: false, //显示
            view: false, //查看
            edit: false, //编辑
            delete: false
          },
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: false,
            add: false,
            output: false
          }
        }
      }
    };
  },

  methods: {
    initData() {
      if (userType === "0") {
        //管理员接口
        this.tabConfig.isHighLevel = true;
        this.tabConfig.activeName = "today";
        this.todayConfig.configs.operationCol.show = false;
        this.$api.fwprogress
          .listWorkload({ subjectId: projectName })
          .then(res => {
            console.log(res.data);
            let todaydata = [];
            let historydata = [];
            if (res.code == 200) {
              res.data.forEach(item => {
                if (item.createTime === today) {
                  todaydata.push(item);
                } else {
                  historydata.push(item);
                }
              });
              this.todayConfig.data = todaydata;
              this.historyConfig.data = historydata;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$api.fwprogress
          .listWorkload({ subjectId: projectName, handler: uid })
          .then(res => {
            if (res.code == 200) {
              console.log(res.data);
              let todaydata = [];
              let historydata = [];
              res.data.forEach(item => {
                if (item.createTime === today) {
                  todaydata.push(item);
                } else {
                  historydata.push(item);
                }
              });
              this.todayConfig.data = todaydata;
              this.historyConfig.data = historydata;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },

    //tab操作
    changeTab(tab) {
      if (tab.name == "prolist") {
        this.listConfig.tableShow = true;
      }
      if (tab.name == "today") {
        this.todayConfig.tableShow = true;
      }
    },

    //上报工作量
    reportData(row) {
      this.listConfig.tableShow = false;
      this.workload = {
        subjectId: row.subjectName,
        tenders: row.tenders,
        major: row.major,
        projectId: row.projectId,
        projectName: row.projectName,
        handler: uid,
        drillingNumber: 0,
        length: 0.0,
        monitorWell: 0,
        testWell: 0,
        createTime: this.getNowFormatDate()
      };
    },

    onSubmit() {
      this.listConfig.loading = true;
      this.$api.fwprogress
        .addWorkload(this.workload)
        .then(res => {
          this.listConfig.loading = false;
          if (res.code == 200) {
            this.$message.success("上报成功");
            this.initData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.listConfig.loading = false;
          this.$message.error("上报失败：" + err);
        });
    },

    onCancel() {
      this.listConfig.tableShow = true;
      this.workload = {};
    },

    //今日数据操作
    updataData(row) {
      this.todayConfig.tableShow = false;
      this.workload = {
        id: row.id,
        subjectId: row.subjectId,
        tenders: row.tenders,
        major: row.major,
        projectId: row.projectId,
        projectName: row.projectName,
        handler: uid,
        drillingNumber: row.drillingNumber,
        length: row.length,
        monitorWell: row.monitorWell,
        testWell: row.testWell,
        createTime: row.createTime
      };
    },

    deleteData(row) {
      this.$confirm("此操作将永久删除该条工作量, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.todayConfig.loading = true;
        this.$api.fwprogress
          .deleteWorkload(row.id)
          .then(res => {
            this.todayConfig.loading = false;
            if (res.code == 200) {
              this.todayConfig.loading = false;
              this.$message.success("删除成功");
              this.initData();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.todayConfig.loading = false;
            this.$message.error(err);
          });
      });
    },

    onSubmitEdit() {
      this.todayConfig.loading = true;
      this.$api.fwprogress
        .updateWorkload(this.workload)
        .then(res => {
          this.todayConfig.loading = false;
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.initData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.todayConfig.loading = false;
          this.$message.error("修改失败：" + err);
        });
    },

    onToCancel() {
      this.todayConfig.tableShow = true;
    },

    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  }
};
</script>
<style lang='less' scoped>
.col-flex {
  box-sizing: border-box;
  padding-top: 30px;
  height: 100%;

  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }
  .maincont-container {
    height: 100%;
    margin-top: 3px;
    /deep/.el-tabs {
      height: 100%;

      .el-tabs__header {
        margin: 0;
      }
      .el-tabs__content {
        height: calc(~"100% - 40px");
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }

  .project-preview {
    display: flex;
    flex-direction: column;
    justify-items: start;
    align-items: center;
    padding: 10px 10px;

    .el-form {
      margin-top: 20px;
      width: 80%;
    }

    .el-form-item {
      padding-bottom: 0px;
      margin-bottom: 0px;
      font-size: 30px;
    }
  }

  .workload-container {
    display: flex;
    flex-direction: column;
    justify-items: start;
    align-items: center;
    padding: 10px 10px;
    .el-form {
      margin-top: 20px;
      width: 80%;

      .el-input-number {
        width: 100%;
      }
    }
  }
}
</style>